<template>
<div>
    <headz ref="headz"></headz>
    <el-row>
        <el-col :span="3">
            <leftmenu :headzHeight="headzHeight"></leftmenu>
        </el-col>
        <el-col :span="21" :style="prop_headzHeight">
            <router-view></router-view>
        </el-col>
    </el-row>
</div>
</template>

<script>
import headz from '@/components/Headz.vue';
import leftmenu from '@/components/LeftMenu.vue';
export default {
    data() {
        return {
            headzHeight: 0
        }
    },
    components: {
        headz,
        leftmenu
    },
    mounted() {

        this.headzHeight = this.$refs.headz.$el.scrollHeight
    },
    computed: {
        prop_headzHeight() {
            //console.log('headzHeight::', this.headzHeight)
            var _menuHeight = document.documentElement.clientHeight - this.headzHeight
            return ('height:' + _menuHeight + 'px;overflow:auto')
        }
    }
}
</script>

<style>

</style>
